<template>
	<el-card shadow="hover" class="chart-card">
		<template #header>备件库存状态</template>
		<v-chart :option="option" autoresize style="width: 100%; height: 350px;" />
	</el-card>
</template>

<script>
import { ref, onMounted } from 'vue'
import { getSparePartsData } from '@/mock/dashboardData'

export default {
	setup() {
		const option = ref({})
		onMounted(() => {
			nextTick(() => {
				const { min, max, timeline, fluctuation } = getSparePartsData()
				option.value = {
					tooltip: { trigger: 'axis' },
					xAxis: {
						type: 'category',
						data: timeline,
						boundaryGap: false
					},
					yAxis: {
						type: 'value',
						name: '库存数量'
					},
					legend: {
						data: ['库存变化']
					},
					series: [
						{
							name: '库存变化',
							type: 'line',
							data: fluctuation,
							smooth: true,
							areaStyle: {
								opacity: 0.2
							},
							lineStyle: {
								width: 2
							},
							markLine: {
								symbol: ['none', 'none'],
								label: {
									formatter: '{b}: {c}'
								},
								lineStyle: {
									type: 'dashed'
								},
								data: [
									{ yAxis: min, name: '安全下限' },
									{ yAxis: max, name: '安全上限' }
								]
							}
						}
					]
				}
			})
		})
		return { option }
	}
}
</script>

<style scoped>
.chart-card {
	height: 400px;
}
</style>
